<template>
  <div id="login">
    <p class="top">
      <i class="iconfont icon-huiyiqiandao-copy"></i>
      <span>微会议</span>
    </p>
    <div id="account">
      <x-input placeholder="账号" type="text" v-model="formLogin.account"></x-input>
      <x-input placeholder="密码" type="password" v-model="formLogin.password"></x-input>
    </div>
    <p class="forgotpassword"></p>
    <div class="button">
      <x-button @click.native="onSubmit()" :disabled="formLogin.account.length==0||formLogin.password.length==0" type="primary">登 录</x-button>
    </div>
    <!--<div class="button">
      <x-button @click.native="onSubmit()" :disabled="formLogin.account.length==0||formLogin.password.length==0">no access?request a demo</x-button>
    </div>-->

    <div class="link">
      <a href="http://18.191.16.200:10080/#/modifyPassword">前往账号自助服务平台</a>
    </div>
  </div>
</template>

<style lang='less'>
#login {
  background-image: url(../assets/img/bg1.png);
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  .forgotpassword {
    height: 3.5rem;
    line-height: 3.5rem;
    color: #75869a;
    text-align: center;
    font-size: 1rem;
  }
  #account {
    width: 92%;
    margin: 0px auto;
    border-radius: 0.2rem;
    background-color: white;
  }
  .top {
    text-align: center;
    // padding-left: 6%;
    margin-top: 3rem;
    margin-bottom: 2rem;
    span {
      font-size: 2rem;
      font-weight: bold;
      color: white;
    }
  }
  .iconfont {
    vertical-align: bottom;
    &.icon-huiyiqiandao-copy {
      font-size: 4rem;
      color: #00d7c7;
      // position: relative;
      // top: -0.6rem;
      // left: 0.8rem;
    }
  }
  .button {
    width: 92%;
    margin: 0px auto;
    margin-bottom: 1.25rem;
  }
  .link {
    text-align: center;
    a {
      color: #EAEAEA;
      display: inline-block;
      width: 92%;
      height: 2.2rem;
      line-height: 2.2rem;
      border: 1px solid #DCDCDC;
      border-radius: 1.1rem;
    }
  }
}
</style>

<script>
import { XInput, Group, XButton } from "vux";

export default {
  name: "Login",
  components: {
    XInput,
    XButton,
    Group
  },
  data() {
    return {
      formLogin: {
        account: "",
        password: ""
      }
    };
  },
  methods: {
    onSubmit() {
       this.$router.push({
        name: "Main"
      });
    }
  }
};
</script>
